<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>商优选</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/nav.css">
    <link rel="stylesheet" href="css/content.css">
    <link rel="stylesheet" href="css/bottom.css">

    <script src="js/data.js"></script>
    <script src="js/index.js"></script>
</head>

<body>
    <!-- 最外层的包裹元素 -->
    <div id="wrapper">
        <!-- 头部 -->
        <header>
            <!-- 上面部分 -->
            <div class="headTop">
                <!-- 版心元素 -->
                <div class="headTopMain">
                    <!-- 左侧 -->
                    <div class="left">
                        <h5>欢迎来到尚优选！请</h5>
                        <p>
                            <a href="javascript:;">登录</a>
                            <a href="javascript:;">注册</a>
                        </p>
                    </div>
                    <!-- 右侧 -->
                    <div class="right">
                        <nav>
                            <a href="javascript:;">我的订单</a>
                            <a href="javascript:;">我的购物车</a>
                            <a href="javascript:;">我的尚优选</a>
                            <a href="javascript:;">尚优选会员</a>
                            <a href="javascript:;">企业采购</a>
                            <a href="javascript:;">关注尚优选</a>
                            <a href="javascript:;">合作招商</a>
                            <a href="javascript:;">商家后台</a>
                        </nav>
                    </div>
                </div>
            </div>
            <!-- 下半部分 -->
            <div class="headBottom">
                <!-- 版心元素 -->
                <div class="headBottomMain">
                    <!-- logo -->
                    <div class="logo">
                        <a href="javascript:;">
                            <img src="image/logo.png" alt="">
                        </a>
                    </div>
                    <!-- 搜索框 -->
                    <div class="search">
                        <input type="input" placeholder="请输入搜索内容">
                        <input type="submit" value="搜索">
                    </div>
                </div>
            </div>
        </header>
        <!-- 分类导航 -->
        <div id="navWrap">
            <div class="navWrapMain">
                <a href="javascript:;">全部商品分类</a>
                <a href="javascript:;">服装城</a>
                <a href="javascript:;">美妆馆</a>
                <a href="javascript:;">尚优选超市</a>
                <a href="javascript:;">全球购</a>
                <a href="javascript:;">闪购</a>
                <a href="javascript:;">团购</a>
                <a href="javascript:;">有趣</a>
                <a href="javascript:;">秒杀</a>
            </div>
        </div>
        <!-- 内容区 -->
        <main>
            <!-- 版心元素 -->
            <div class="content">
                <!-- 路径导航 -->
                <div id="navPath"><!-- js实现数据动态拼接标签 --></div>
                <!-- 中间主内容区 -->
                <div id="center">
                    <!-- 左侧放大镜 -->
                    <div id="left">
                        <!-- 左侧上方大图 -->
                        <div id="leftTop">
                            <!-- 原图 -->
                            <div id="src">
                                <!-- 图片 -->
                                <img src="">
                            </div>
                        </div>
                        <!-- 左侧下方缩略图 -->
                        <div id="leftBottom">
                            <a href="javascript:;" class="prev"> &lt; </a>
                            <div id="picList">
                                <ul></ul>
                            </div>
                            <a href="javascript:;" class="next"> &gt; </a>
                        </div>
                    </div>
                    <!-- 右侧商品详情区域 -->
                    <div id="right">
                        <!-- 商品详情结构 -->
                        <div class="rightTop"></div>
                        <!-- 商品参数结构 -->
                        <div class="rightBottom">
                            <!-- 选择结果区域 -->
                            <div class="choice"></div>
                            <!-- 商品参数选择区域 -->
                            <div class="type"></div>
                            <!-- 加入购物车 -->
                            <div class="cart">
                                <div class="count">
                                    <input type="text">
                                    <a href="javascript:;">+</a>
                                    <a href="javascript:;">-</a>
                                </div>
                                <button>加入购物车</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </main>
        <!-- 商品详情及相关产品联想 -->
        <section>
            <!-- 侧边栏 相关分类、推荐品牌等 -->
            <aside>
                <div class="sideTop">
                    <h4 class="active">相关分类</h4>
                    <h4>推荐品牌</h4>
                </div>
                <div class="sideContent">
                    <div>
                        <div class="active">
                            <ul class="classification">
                                <li>手机</li>
                                <li>手机壳</li>
                                <li>内存卡</li>
                                <li>iPhone配件</li>
                                <li>贴膜</li>
                                <li>手机耳机</li>
                                <li>移动电源</li>
                                <li>平板电脑</li>
                            </ul>
                            <ul class="accessory">
                                <li>
                                    <img src="image/part01.png">
                                    <span>Apple 苹果IPhone6s（A1699）</span>
                                    <p>￥6088.00</p>
                                    <div class="button">
                                        <a href="javascript:;">加入购物车</a>
                                    </div>
                                </li>
                                <li>
                                    <img src="image/part02.png">
                                    <span>Apple 苹果IPhone6s（A1699）</span>
                                    <p>￥6088.00</p>
                                    <div class="button">
                                        <a href="javascript:;">加入购物车</a>
                                    </div>
                                </li>
                                <li>
                                    <img src="image/part03.png">
                                    <span>Apple 苹果IPhone6s（A1699）</span>
                                    <p>￥6088.00</p>
                                    <div class="button">
                                        <a href="javascript:;">加入购物车</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div>推荐品牌的内容</div>
                    </div>

                </div>
            </aside>
            <!-- 右边的结构 -->
            <div class="rightDetail">
                <!-- 选择搭配 -->
                <div class="combo">
                    <!-- 标题 -->
                    <h4>选择搭配</h4>
                    <!-- 内容 -->
                    <div class="listWrap">
                        <div class="left">
                            <img src="image/l-m01.png">
                            <p>￥5299.00</p>
                            <i>+</i>
                        </div>
                        <ul class="middle">
                            <li>
                                <img src="image/dp01.png">
                                <span>Felless 飞乐思VR</span>
                                <div>
                                    <input type="checkbox" value="50">
                                    <span>50</span>
                                </div>
                            </li>
                            <li>
                                <img src="image/dp02.png">
                                <span>Felless 飞乐思VR</span>
                                <div>
                                    <input type="checkbox" value="50">
                                    <span>50</span>
                                </div>
                            </li>
                            <li>
                                <img src="image/dp03.png">
                                <span>Felless 飞乐思VR</span>
                                <div>
                                    <input type="checkbox" value="50">
                                    <span>50</span>
                                </div>
                            </li>
                            <li>
                                <img src="image/dp04.png">
                                <span>Felless 飞乐思VR</span>
                                <div>
                                    <input type="checkbox" value="50">
                                    <span>50</span>
                                </div>
                            </li>
                        </ul>
                        <div class="right">
                            <div>已购0件商品</div>
                            <p>套餐价</p>
                            <i>￥5299</i>
                            <div>
                                <button>加入购物车</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 选项卡 -->
                <div class="details">
                    <ul class="tab">
                        <li class="active">
                            <a href="javascript:;">商品介绍</a>
                        </li>
                        <li>
                            <a href="javascript:;">规格包装</a>
                        </li>
                        <li>
                            <a href="javascript:;">售后有保障</a>
                        </li>
                        <li>
                            <a href="javascript:;">商品评价</a>
                        </li>
                        <li>
                            <a href="javascript:;">手机社区</a>
                        </li>
                    </ul>
                    <div class="tabContent">
                        <div class="active">
                            <ul>
                                <li>分辨率：1920*1080(FHD)</li>
                                <li>后置摄像头：1200万像素</li>
                                <li>前置摄像头：500万像素</li>
                                <li>核 数：其他</li>
                                <li>频 率：以官网信息为准</li>
                                <li>品牌： Apple</li>
                                <li>商品名称：APPLEiPhone 6s Plus</li>
                                <li>商品编号：1861098</li>
                                <li>商品产地：中国大陆</li>
                                <li>商品毛重：0.51kg</li>
                                <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                                <li>系统：苹果（IOS）</li>
                                <li>像素：1000-1600万品毛重：0.51kg</li>
                                <li>机身内存：64GB</li>
                            </ul>
                            <img src="image/intro01.png">
                            <img src="image/intro02.png">
                            <img src="image/intro03.png">
                        </div>
                        <div>规格包装的内容</div>
                        <div>售后与保障的内容</div>
                        <div>商品评价的内容</div>
                        <div>手机社区的内容</div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>

</html>